<template>
  <div class="app-container">
    <div class="filter-container">
      <!--      <el-button class="filter-item" type="primary" @click="handleCreate">新增</el-button>-->

      <el-input class="filter-item" v-model="listQuery.inn_name" placeholder="酒店名称" style="width: 220px;" clearable
                size="small"/>
      <el-select class="filter-item" v-model="listQuery.book_flag" placeholder="是否支持预定" style="width: 160px"
                 clearable size="small">
        <el-option label="支持预订" :value="1"/>
        <el-option label="不支持预订" :value="0"/>
      </el-select>
      <el-select class="filter-item" v-model="listQuery.status" placeholder="酒店状态" style="width: 160px" clearable
                 size="small">
        <el-option label="营业" :value="1"/>
        <el-option label="非营业" :value="0"/>
      </el-select>
      <el-select class="filter-item" v-model="listQuery.valid" placeholder="是否有效" style="width: 160px" clearable
                 size="small">
        <el-option label="有效" :value="1"/>
        <el-option label="无效" :value="0"/>
      </el-select>

      <el-button class="filter-item" type="primary" @click="handleFilter" size="small">搜索</el-button>

      <!--      <el-button class="filter-item" type="success" @click="handleSubHotelBatchImport">批量导入</el-button>-->
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
              size="small">
      <el-table-column label="酒店ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="锦江酒店唯一编号" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.inn_id }}
        </template>
      </el-table-column>

      <el-table-column label="锦江酒店名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.inn_name }}
        </template>
      </el-table-column>

      <el-table-column label="经度" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.map_info[0] ? scope.row.map_info[0].lng : "-" }}
        </template>
      </el-table-column>

      <el-table-column label="纬度" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.map_info[0] ? scope.row.map_info[0].lag : "-" }}
        </template>
      </el-table-column>

      <el-table-column label="酒店地址" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>

      <el-table-column label="是否支持预订" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.book_flag === 0" type="danger">不支持预订</el-tag>
          <el-tag v-else-if="scope.row.book_flag === 1" type="success">支持预订</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="酒店状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success">营业</el-tag>
          <el-tag v-else type="danger">非营业</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="是否有效" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.valid === 0" type="danger">失效</el-tag>
          <el-tag v-else-if="scope.row.valid === 1" type="success">有效</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column label="同步时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.sync_at }}
        </template>
      </el-table-column>
      <el-table-column label="房型同步时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_type_sync_at }}
        </template>
      </el-table-column>
      <el-table-column label="相册同步时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.image_sync_at }}
        </template>
      </el-table-column>
      <el-table-column label="房态同步时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_status_sync_at }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div>
            <el-button type="warning" size="mini" @click="syncHotelInfo(scope.row)">同步酒店信息</el-button>
            <el-button type="warning" size="mini" @click="syncHotelRoomType(scope.row)">同步房型</el-button>
          </div>
          <div style="margin-top: 5px;">
            <el-button type="warning" size="mini" @click="syncHotelRoomStatus(scope.row)"
            :disabled="scope.row.book_flag!=1||scope.row.status!=1||scope.row.valid!=1"
            >同步房态</el-button>
            <el-button type="warning" size="mini" @click="syncHotelImage(scope.row)">同步相册</el-button>
          </div>


          <!--          <el-button type="primary" size="mini" @click="handleCreateSubBasicRoomType(scope.row)">新增子物理房型</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[5,10,20,30,50]" :page-size="listQuery.limit"
                     :total="total" background layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <!-- 详情 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="60%"
               :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="锦江酒店唯一编号" prop="inn_id">
          <el-input v-model="form.inn_id" placeholder="锦江酒店唯一编号" disabled/>

          <div class="filter-container" style="margin-top: 10px;">
            <el-input class="filter-item" v-model="hotelListQuery.inn_name" placeholder="搜索锦江酒店"
                      style="width: 500px;" clearable/>

            <el-button class="filter-item" type="primary" @click="handleHotelListFilter">搜索</el-button>
          </div>

          <el-table v-loading="hotelListLoading" :data="hotelList" element-loading-text="Loading" border fit
                    highlight-current-row :show-header="false">
            <el-table-column label="锦江酒店">
              <template slot-scope="scope">
                <el-radio v-model="form.inn_id" :label="scope.row.inn_id">{{ scope.row.inn_name }}</el-radio>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination :current-page="hotelListQuery.page" :page-sizes="[5,10,20,30,50]"
                           :page-size="hotelListQuery.limit" :total="hotelTotal" background
                           layout="total, sizes, prev, pager, next, jumper" @size-change="handleHotelListSizeChange"
                           @current-change="handleHotelListCurrentChange"/>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData" :loading="btnLoading">确定</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->

    <!-- 新增子物理房型 -->
    <el-dialog title="新增子物理房型" :visible.sync="dialogVisibleCreateSubBasicRoomType" width="60%"
               :close-on-click-modal="false">
      <el-form ref="createSubBasicRoomTypeForm" :rules="createSubBasicRoomTypeRules" :model="createSubBasicRoomTypeForm"
               label-width="150px">
        <el-form-item label="锦江酒店房型" prop="room_type_code">
          <el-select filterable v-model="createSubBasicRoomTypeForm.room_type_code" placeholder="请选择类型" clearable>
            <el-option v-for="item in hotelRoomTypes" :key="item.roomTypeCode" :label="item.roomTypeName"
                       :value="item.roomTypeCode"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="房型类型" prop="room_type_std">
          <el-radio-group v-model="createSubBasicRoomTypeForm.room_type_std">
            <el-radio :label="1" style="margin: 5px;">标准间</el-radio>
            <el-radio :label="2" style="margin: 5px;">双床房</el-radio>
            <el-radio :label="3" style="margin: 5px;">三人房</el-radio>
            <el-radio :label="4" style="margin: 5px;">单人间</el-radio>
            <el-radio :label="5" style="margin: 5px;">家庭房</el-radio>
            <el-radio :label="6" style="margin: 5px;">大床房</el-radio>
            <el-radio :label="7" style="margin: 5px;">四人间</el-radio>
            <el-radio :label="8" style="margin: 5px;">套房</el-radio>
            <el-radio :label="9" style="margin: 5px;">床位房</el-radio>
            <el-radio :label="10" style="margin: 5px;">公寓</el-radio>
            <el-radio :label="11" style="margin: 5px;">别墅</el-radio>
            <el-radio :label="12" style="margin: 5px;">房车</el-radio>
            <el-radio :label="13" style="margin: 5px;">帐篷</el-radio>
            <el-radio :label="14" style="margin: 5px;">小木屋</el-radio>
            <el-radio :label="15" style="margin: 5px;">工作室</el-radio>
            <el-radio :label="16" style="margin: 5px;">高级房</el-radio>
            <el-radio :label="17" style="margin: 5px;">豪华房</el-radio>
            <el-radio :label="18" style="margin: 5px;">家庭房</el-radio>
            <el-radio :label="19" style="margin: 5px;">行政房</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCreateSubBasicRoomType = false">取消</el-button>
        <el-button type="primary" @click="saveDataCreateSubBasicRoomType" :loading="btnLoading">确定</el-button>
      </div>
    </el-dialog>
    <!-- 新增子物理房型 -->

    <!-- 子酒店批量导入 -->
    <el-dialog title="子酒店批量导入" :visible.sync="dialogVisibleSubHotelBatchImport" width="60%"
               :close-on-click-modal="false">
      <el-form ref="subHotelBatchImportForm" :rules="subHotelBatchImportRules" :model="subHotelBatchImportForm"
               label-width="150px">
        <el-form-item label="锦江酒店唯一编号" prop="inn_ids">
          <el-input type="textarea" :rows="10" placeholder="锦江酒店唯一编号(多个编号请使用换行)"
                    v-model="subHotelBatchImportForm.inn_ids"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSubHotelBatchImport = false">取消</el-button>
        <el-button type="primary" @click="saveDataSubHotelBatchImport" :loading="btnLoading">确定</el-button>
      </div>
    </el-dialog>
    <!-- 子酒店批量导入 -->
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        hotel_name: "",
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "修改",
        create: "新增",
      },
      btnLoading: false,
      form: {
        inn_id: "",
      },
      hotelList: null,
      hotelTotal: null,
      hotelListLoading: true,
      hotelListQuery: {
        page: 1,
        limit: 10,
        inn_name: "",
      },
      // 新增子物理房型
      dialogVisibleCreateSubBasicRoomType: false,
      createSubBasicRoomTypeForm: {
        hotel_id: "",
        room_type_code: "",
        room_type_std: "",
      },
      createSubBasicRoomTypeRules: {
        hotel_id: [{required: true, message: "子酒店ID不能为空", trigger: "change"}],
        room_type_code: [{required: true, message: "锦江酒店房型不能为空", trigger: "change"}],
        room_type_std: [{required: true, message: "房型类型不能为空", trigger: "change"}],
      },
      // 锦江酒店房型
      hotelRoomTypes: [],
      // 子酒店批量导入
      dialogVisibleSubHotelBatchImport: false,
      subHotelBatchImportForm: {
        inn_ids: "",
      },
      subHotelBatchImportRules: {
        inn_ids: [{required: true, message: "锦江酒店唯一编号不能为空", trigger: "change"}],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      request({
        url: "/api/backend/hotel/hotelList",
        method: "get",
        params: this.listQuery,
      }).then(response => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    getHotelList() {
      this.hotelListLoading = true;
      request({
        url: "/api/backend/hotel/hotelList",
        method: "get",
        params: this.hotelListQuery,
      }).then(response => {
        this.hotelList = response.data.items;
        this.hotelTotal = response.data.total;
        this.hotelListLoading = false;
      });
    },
    handleHotelListFilter() {
      this.hotelListQuery.page = 1;
      this.getHotelList();
    },
    handleHotelListSizeChange(val) {
      this.hotelListQuery.limit = val;
      this.getHotelList();
    },
    handleHotelListCurrentChange(val) {
      this.hotelListQuery.page = val;
      this.getHotelList();
    },
    getHotelRoomTypeList() {
      request({
        url: "/api/backend/room/hotelRoomTypeList",
        method: "get",
        params: {
          hotel_id: this.createSubBasicRoomTypeForm.hotel_id,
        }
      }).then(response => {
        this.hotelRoomTypes = response.data;
      });
    },
    resetForm() {
      this.form = {
        inn_id: "",
      };
      this.btnLoading = false;
    },
    handleCreate() {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    handleUpdate(row) {
      this.resetForm();
      this.form = Object.assign({}, row);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
    },
    saveData() {
      if (!this.form.inn_id) {
        this.$message({
          type: "warning",
          message: "锦江酒店唯一编号不能为空"
        });
        return;
      }

      this.btnLoading = true;
      request({
        url: "/api/backend/hotel/subHotelSave",
        method: "post",
        data: this.form
      }).then(() => {
        this.btnLoading = false;
        this.dialogFormVisible = false;
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.getList();
      }).catch(() => {
        this.btnLoading = false;
      });
    },
    syncHotelInfo(row) {
      this.$confirm("确认继续该操作", "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/backend/hotel/syncHotelInfo",
          method: "post",
          data: {
            inn_id: row.inn_id
          },
          timeout: 10 * 60 * 1000
        }).then(() => {
          this.list.length <= 1 && this.listQuery.page > 1 ? this.listQuery.page-- : false;
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
      }).catch(() => {
      });
    },
    syncHotelRoomType(row) {
      this.$confirm("确认继续该操作", "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/backend/hotel/syncHotelRoomType",
          method: "post",
          data: {
            inn_id: row.inn_id
          },
          timeout: 10 * 60 * 1000
        }).then(() => {
          this.list.length <= 1 && this.listQuery.page > 1 ? this.listQuery.page-- : false;
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
      }).catch(() => {
      });
    },
    syncHotelRoomStatus(row) {
      this.$confirm("确认继续该操作", "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/backend/hotel/syncHotelRoomStatus",
          method: "post",
          data: {
            inn_id: row.inn_id
          },
          timeout: 10 * 60 * 1000
        }).then(() => {
          this.list.length <= 1 && this.listQuery.page > 1 ? this.listQuery.page-- : false;
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
      }).catch(() => {
      });
    },
    syncHotelImage(row) {
      this.$confirm("确认继续该操作", "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/backend/hotel/syncHotelImage",
          method: "post",
          data: {
            inn_id: row.inn_id
          },
          timeout: 10 * 60 * 1000
        }).then(() => {
          this.list.length <= 1 && this.listQuery.page > 1 ? this.listQuery.page-- : false;
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
      }).catch(() => {
      });
    },
    // 新增子物理房型
    handleCreateSubBasicRoomType(row) {
      this.createSubBasicRoomTypeForm = {
        hotel_id: row.id,
        room_type_code: "",
        room_type_std: "",
      };
      this.getHotelRoomTypeList();
      this.dialogVisibleCreateSubBasicRoomType = true;
      this.$nextTick(() => {
        this.$refs["createSubBasicRoomTypeForm"].clearValidate(); //清除校验结果
      });
    },
    saveDataCreateSubBasicRoomType() {
      this.$refs["createSubBasicRoomTypeForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          request({
            url: "/api/backend/room/subBasicRoomTypeSave",
            method: "post",
            data: this.createSubBasicRoomTypeForm
          }).then(() => {
            this.dialogVisibleCreateSubBasicRoomType = false;
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.getList();
          }).finally(() => {
            this.btnLoading = false;
          });
        }
      });
    },
    // 子酒店批量导入
    handleSubHotelBatchImport() {
      this.subHotelBatchImportForm = {
        inn_ids: "",
      };
      this.dialogVisibleSubHotelBatchImport = true;
      this.$nextTick(() => {
        this.$refs["subHotelBatchImportForm"].clearValidate(); //清除校验结果
      });
    },
    saveDataSubHotelBatchImport() {
      this.$refs["subHotelBatchImportForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          request({
            url: "/api/backend/hotel/subHotelBatchImport",
            method: "post",
            data: this.subHotelBatchImportForm,
            timeout: 10 * 60 * 1000
          }).then(() => {
            this.dialogVisibleSubHotelBatchImport = false;
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.getList();
          }).finally(() => {
            this.btnLoading = false;
          });
        }
      });
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
